import { useState } from "react";
import { Radio, Upload } from "antd";
import { TextArea } from "@/components/func";
import { PhoneView, UploadButton } from "@/components/render";
import { getBase64 } from "@/assets/js/common";

interface props {
  welcomeType: number; // 欢迎语类型
  welcomMsg: any; // 欢迎语
  setWelcomMsg: any; // 设置欢迎语
}

const WelcomeSet = ({ welcomeType, welcomMsg, setWelcomMsg }: props) => {
  const [firstMes, setFirstMes] = useState("");
  const [messageType, setMessageType] = useState(1);
  const [loading, setLading] = useState(false);
  const [imageUrl, setImageUrl] = useState("");

  return (
    <div
      className={`relative rounded-sm flex justify-start items-start py-12 px-16 w-full ${
        welcomeType === 1 ? "" : "none"
      }`}>
      <div className="w-full">
        {/* 欢迎语1 */}
        <div className="flex mb-24 w-full">
          <h4 className="w-70">欢迎语1:</h4>
          <TextArea
            placeholder="请输入回复内容"
            value={firstMes}
            maxLength={600}
            onChange={(value: any) => {
              welcomMsg.text.content = value;
              setFirstMes(value);
              setWelcomMsg(welcomMsg);
            }}
          />
        </div>

        {/* 欢迎语2 */}
        <div className="flex mb-24 w-full">
          <h4 className="w-70">欢迎语2:</h4>
          <div className="bg-grey-fbfbfb w-full rounded-2 border-1 border-solid border-grey-200 two p-16 pr-12">
            <div className="tabs flex items-center">
              <p className="text-grey-600 mr-10">选择消息类型</p>
              <Radio.Group
                onChange={(e: any) => {
                  setMessageType(e.target.vlaue);
                }}
                defaultValue={messageType}>
                <Radio value={1}>图片</Radio>
                <Radio value={2}>链接</Radio>
                <Radio value={3}>小程序</Radio>
                <Radio value={4}>自定义菜单</Radio>
                <Radio value={5}>抽奖活动</Radio>
              </Radio.Group>
            </div>
            {/* 图片选择 */}
            <div className="relative w-128 h-128 mt-10">
              <Upload
                name="avatar"
                className="avatar-uploader"
                showUploadList={false}
                listType="picture-card"
                beforeUpload={() => {
                  return false;
                }}
                onChange={(info: any) => {
                  // console.log(info);
                  // console.log(info.file.status);
                  getBase64(info.file, (url: any) => {
                    welcomMsg.image.url = url;
                    setImageUrl(url);
                    // setWelcomMsg(welcomMsg);
                  });
                }}>
                <UploadButton url={imageUrl} loading={loading} />
              </Upload>
              <i
                className="iconfont icon-cuo absolute top-0 ring-0 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer text-grey-300"
                onClick={() => {
                  setLading(false);
                  setImageUrl("");
                }}></i>
            </div>
          </div>
        </div>
      </div>

      {/* 欢迎语预览 */}
      <div className="absolute -top-60 -right-280 w-280 h-530">
        <PhoneView text={firstMes} image={imageUrl} />
      </div>
    </div>
  );
};

export default WelcomeSet;
